<template>
    <div class="mypic_item" @click="todetail">
        <div>
            <el-image :src="pross.item.imgurl[0]" fit="fill" :lazy="true"></el-image>
        </div>
        <span>共{{ pross.item.imgurl.length }}张</span>
        <div class="top">
            <p>{{ pross.item.concent }}</p>
        </div>
        <div class="close" @click.stop="deletes">

            <el-popconfirm @confirm="deletes2" title="确认移出收藏?" confirm-button-text="是" cancel-button-text="否">
                <template #reference>
                    <el-icon size="0.4rem" color="#eee">
                        <CloseBold />
                    </el-icon>
                </template>
            </el-popconfirm>

        </div>
        <div class="detaile">
            <el-dialog v-model="centerDialogVisible" width="50%" destroy-on-close center>
                <span>
                    {{ pross.item.concent }}
                </span>
                <div class="images">
                    <el-image style="width: 50%;" :preview-src-list="pross.item.imgurl" :initial-index="index" :src="sc"
                        v-for="(sc, index) in pross.item.imgurl" :key="index" fit="fill" :lazy="true"></el-image>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click.stop="confirm">
                            关闭
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { removelike } from '@/api/articl';
// import { ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus';
import { GetCurrentUserId } from '@/utils/GetCurrentUserId'

import userUserRouter from "@/store/module/user"
import { DELE_TOEKN, DELE_USER } from '@/utils/token'
let $emit = defineEmits(['deleteone'])
let $userstore = userUserRouter()
let pross = defineProps({
    item: {
        type: Object,
        default: {}
    }
})
const centerDialogVisible = ref(false)
const todetail = () => {
    centerDialogVisible.value = true
    console.log('666')
}
const deletes = () => {

}
const deletes2 = async () => {
    console.log(pross.item.likearticl)
    console.log(GetCurrentUserId())
    pross.item.likearticl.splice(pross.item.likearticl.indexOf(GetCurrentUserId()), 1)
    let data = {
        id: pross.item._id,
        likearticl: pross.item.likearticl

    }
    removelike(data).then(() => {
        ElMessage({
            message: '取消成功',
            type: 'success'
        })
        $emit('deleteone', pross.item._id)
    }).catch(() => {
        console.log('取消')
        ElMessage({
            message: "登录过期",
            type: 'error'
        })
        $userstore.token = ''
        $userstore.userinfo = {}
        DELE_TOEKN()
        DELE_USER()
    })
    console.log(pross.item.likearticl)



}

const confirm = () => {
    centerDialogVisible.value = false
    console.log('66')

}
</script>

<style lang="scss" scoped>
.mypic_item {
    position: relative;

    .detaile {
        position: absolute;

        .images {
            height: 100%;
        }
    }

    width: 3.5rem;
    height: 4rem;
    display: flex;
    flex-direction: column;
    background-color: #A9CCE3;
    position: relative;

    span {
        font-family: '楷体';
        font-size: 0.3rem;
    }

    .close {
        cursor: pointer;
        top: 0;
        right: 0;
        position: absolute;
    }

    p {
        padding: .0133rem;
        width: 100%;
        font-size: .2667rem;
        font-family: '楷体';
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 控制多行的行数
        -webkit-box-orient: vertical;

    }

    .el-image {
        width: 100%;
        height: 2.666rem;
    }
}
</style>